A Technical Overview of the Mobile Web : THE TECHNICAL CHALLENGES OF MOBILE DEVICES (part 1) - Physical Constraints

The "humble" mobile device is really nothing of the sort. Being able to transmit voice, messages, and data over the air, in almost any part of the populated world, is nothing short of a modern miracle. Although as users people take their capabilities and operation for granted on a day-to-day basis, you can't afford to do so when designing mobile web services for them. Let's look at the form and function of modern mobile devices and how they impact the way people think about building web content.

1. Physical Constraints

Pick up any mobile device and look at it carefully. Of course, the first thing you notice is the size, shape, and weight of its physical implementation. Very old mobile devices can be easily recognized by their larger, ungainly form, but following a period in the 1990s and 2000s, during which manufacturers sought to develop ever smaller devices, most modern devices are now of broadly similar size and weight. Not by coincidence, this is about the size that fits comfortably into an adult hand.

A limited selection of device form factors tend to prevail in today's mobile market place. Some are more popular in certain parts of the world than others or among certain demographic groups, so a conscientious mobile web developer needs to be aware of all of them. These broad categories include the following:

• Candybar — These devices are rectangular and static, typically with the main screen on the top half of one face and navigational control keys and a numeric keypad on the lower part of the same face, as with the Samsung SGH-t349, shown in Figure 1. This form factor tends to be prevalent for cheaper or legacy models, although a wider, flatter candybar form, with a larger screen and complete QWERTY keyboard, is often used for more pricey business devices, such as the RIM BlackBerry range and some of the Nokia E-Series range. Figure 2 shows a BlackBerry Bold 9700 device.

  Figure 1.
  

  

  Figure 2.
  

  

• Slate — These devices are also rectangular and static, but with much larger screens and fewer physical buttons on the casing than the candybar form factor. The rise of popularity in slate devices has been largely driven by improvements in touch-screen technology, which allow for point- and swipe-based navigation and for numeric and QWERTY keyboards to be displayed in software. Often, these devices can be rotated between landscape and portrait mode to maximize screen usage for particular types of applications. With the advent of the Apple iPhone and Android-based devices, this form factor has become very popular on expensive consumer devices, although some mid-range devices are now exhibiting similar characteristics. Additionally, a larger variant of the slate form factor, personified by the Apple iPad, Amazon Kindle, and other tablet devices, is starting to inhabit the space between pocket-sized mobile devices and laptops, while still being quite feasible web clients for humans on the move. Figure 3 shows a Google Nexus One running the Android operating system.

  Figure 3.
  

  

• Slider — These devices are rectangular and of similar proportions to candybar devices when closed. However, the two halves of the device, one supporting the screen and one the keyboard, are able to slide relative to each other. This extends the size of the device and exposes the keyboard for use. Portrait-style sliders are popular, often on low-end models, because the longer "open" shape can be easier to use for making calls. Figure 4 shows a Nokia X3 device with a portrait-style slider. However, many contemporary handsets slide in a landscape manner, exposing a QWERTY keyboard to use with a wider screen aspect ratio, as with the HTC P4350 device shown in Figure 5.

• Flip — These devices also are designed to open up and expose a concealed keyboard, but do so with a hinge, rather than a slider. As a result, the primary screen is not visible in the closed state and is generally smaller as a proportion of the device than for the other form factors. Some handsets provide a smaller secondary screen on the outside of the device, but this rarely supports a web browser. Figure 6 shows a Motorola i410 device exhibiting a classic flip form.

  Figure 4.
  

  

  Figure 5.
  

  

  Figure 6.
  

  

Despite all the differences between these form factors, you need to make some reasonable assumptions for the purposes of delivering mobile web content to a capable device. First, you can be fairly sure that the device has a screen upon which its browser can render your content, but also that it is fairly small, both physically and in terms of pixel dimensions — relative to a desktop or laptop screen. Nevertheless, you can't guess what physical or pixel size the screen actually has without identifying the device, and because many devices can be rotated, you need to anticipate both landscape and portrait orientation (and possibly even the transition between them while the user is viewing your content).

The device certainly has some sort of keyboard to allow the user to enter data, although it is unlikely to be as easy to enter text as on a full computer keyboard. At a minimum it will be a numeric keypad, but using multi-tap or predictive text techniques the user can still enter alphabetic characters and most common punctuation. Touch-screen devices offer "soft" keyboards that almost always support numeric, alphabetic, and punctuation input, although often by rendering the keyboard over much of the content of the web page itself. Those devices with QWERTY keyboards make data input even easier for the user, although some do not provide dedicated numeric keys. This can make entering mixed alphabetic and numeric text slightly more difficult and can affect the usability of website password constraints, for example.

Most devices offer a navigation technique for scrolling the screen and the content on it, or for moving the control or cursor focus around the page. Traditionally, this is simply a physical joystick-like key or a quartet of directional keys, and such older devices normally provide fairly crude directional control throughout a web page. Sadly, this is far from the sensitive interaction that a traditional computer mouse would provide. Devices with touch screens can provide more precise control over the browser screen, either through the use of a stylus to tap on form widgets or scroll bars or, increasingly, by allowing swipe and pinch gestures on the screen to pan and zoom through the page and its elements.

Now that you feel confident that mobile devices have at least some common physical — if highly limited — characteristics, brace yourself for a first look at the reality of the diversity among them.